<template>
    <div class="list">
        <div class="box" v-for="(v,index) in goodsArr" :key="index"  @click="goDetail1(v)">
            <img :src="v.img1" alt="">
            <div class="box1">
                <p>{{v.desc}}</p>
                <div>{{v.proname}}</div>
            </div>
        </div>
        <img class="sanjiao" src="https://gw.alicdn.com/imgextra/i1/O1CN01IpFhFd23HqhSBGr5M_!!6000000007231-2-tps-120-45.png_110x10000.jpg_.webp" alt="">
    </div>
</template>

<script>

export default {
    data(){
        return{
            goodsArr:[]
        }
    },
    mounted(){
        this.$http({
            url: "http://118.178.238.19:3001/api/pro/search",
            method: "get",

            params: {
                count: 4,
                limitNum: 30
            }
        }).then(res => {
            this.goodsArr = res.data.data
        })
    },
    methods:{
        goDetail1(v) {
            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)
                }
            })
        }
    }

}
</script>

<style scoped>
.list{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 3%;
    position: relative;
}
.list .box{
    width: 100%;
    height: 150px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
}
.box img{
    width:150px ;
    height: 150px;
}
.box .box1{
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
}
.box1 p{
    font-size: 16px;
    color: #111111;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.box1 div{
    width: 100%;
    min-height: 51px;
    background-color: #f0f8ff;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 6px 7.5px;
    border-radius: 5px;
}
.sanjiao{
    width: 40px;
    height: 15px;
    position: absolute;
    top: -15px;
    left: 25px;
}
</style>